<template>
  <div>
    <h2>列表渲染学习</h2>

    <ol>
      <li v-for="item in StuName">{{ item }}</li>
    </ol>

    <ul>
      <li v-for="item in info">{{ item.sid }}-{{ item.sname }}-{{ item.sage }}</li>
    </ul>

    <table border="1">
      <thead>
        <tr>
        <td>学号</td>
        <td>姓名</td>
        <td>年龄</td>
        </tr>
      </thead>
      <tbody>
        <tr v-for="item in info">
       <td>{{item.sid}}</td>
       <td>{{item.sname}}</td>
       <td>{{item.sage}}</td>
       <td><a @click="EditInfo(item.sid)">修改</a></td>
      </tr>
      </tbody>
      
    </table>
  </div>
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router';
const router = useRouter();

//声明数组
var StuName:string[]=["张三","李四","王五"]
var info= [{
  sid:"1",
  sname:"张三",
  sage:"18"
},
{
  sid:"2",
  sname:"李四",
  sage:'19'
}
]

function EditInfo(sid:string){
  router.push({
    name:"EditStu",
    params:{
      id:sid
    }
  });
}
</script>

<style scoped>

</style>